<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>简易计算器</title>
  <script src="../../lib/vue.js"></script>
  <style>
    .big {
      font-size: 36px;
    }

    #app {
      /* 往屏幕中间挪一点 比较好看 */
      text-align: center;
      margin-top: 300px;
    }
  </style>
</head>

<body>
  <div id="app">
    <input class="big" v-model="n1" type="text" />
    <select class="big" name="运算符" id="op" v-model="opt">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="×">×</option>
      <option value="÷">÷</option>
    </select>
    <input class="big" v-model="n2" type="text" />
    <input class="big" type="button" value="=" @click="calc" />
    <input class="big" v-model="result" type="text" />
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      n1: 0,
      n2: 0,
      result: 0,
      opt: '-'
    },
    methods: {
      calc()
      {
        // switch写法比eval写法在更方面都好很多。
        // 建议使用switch写法；eval写法只是图个乐子
        // switch (this.opt)
        // {
        //   case '+':
        //     this.result = parseInt(this.n1) + parseInt(this.n2);
        //     break;
        //   case '-':
        //     this.result = parseInt(this.n1) - parseInt(this.n2);
        //     break;
        //   case '×':
        //     this.result = parseInt(this.n1) * parseInt(this.n2);
        //     break;
        //   case '÷':
        //     this.result = parseInt(this.n1) / parseInt(this.n2);
        //     break;
        //   default:
        //     break;
        // }

        // 菜鸟教程指出 关于eval
        // eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行。
        // 如果参数是一个表达式，eval() 函数将执行表达式。如果参数是Javascript语句，eval()将执行 Javascript 语句。
        // eval() 是一个危险的函数，它使用与调用者相同的权限执行代码，所以尽可能的不要去使用它，以防被其他人员植入恶意代码
        {
          // 对乘号和除号进行必要的转义
          // 否则eval无法理解
          this.opt = (this.opt == '×' ? '*' : this.opt);
          this.opt = (this.opt == '÷' ? '/' : this.opt);
        }
        var codeStr = 'parseInt(this.n1) ' + this.opt + ' parseInt(this.n2)';
        this.result = eval(codeStr);
      }
    },
  })
</script>

</html>